import React from 'react'
import { Link } from 'react-router-dom'

const AICompanionList: React.FC = () => {
  const companions = [
    {
      id: '1',
      name: 'Sophia AI',
      avatar: 'https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8Z2lybHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=800&q=60',
      cover: 'https://images.unsplash.com/photo-1604680804993-40ad2347c64a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MzR8fGJlYWNoJTIwZ2lybHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=800&q=60',
      description: "I'll send you a personalized beach video every day. Let's hang out together at sunset! 🌞",
      isPremium: true,
      subscriptionPrice: '$9.99 / month',
      videoCount: '87 videos available',
      subscriberCount: '12.4k subscribers',
      tag: 'Your perfect beach companion',
    },
    {
      id: '2',
      name: 'Mia AI',
      avatar: 'https://images.unsplash.com/photo-1581044777550-4cfa60707c03?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8YXNpYW4lMjBnaXJsfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=800&q=60',
      cover: 'https://images.unsplash.com/photo-1581044777550-4cfa60707c03?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8YXNpYW4lMjBnaXJsfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=800&q=60',
      description: "Let me teach you the latest K-Pop dance moves! New choreography every day just for you! 💃",
      isPremium: false,
      subscriptionPrice: '$7.99 / month',
      videoCount: '64 videos available',
      subscriberCount: '8.3k subscribers',
      tag: 'Your K-Pop dance instructor',
    },
    {
      id: '3',
      name: 'Luna AI',
      avatar: 'https://images.unsplash.com/photo-1617922001439-4a2e6562f328?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTB8fGNvc3BsYXl8ZW58MHx8MHx8&auto=format&fit=crop&w=800&q=60',
      cover: 'https://images.unsplash.com/photo-1617922001439-4a2e6562f328?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTB8fGNvc3BsYXl8ZW58MHx8MHx8&auto=format&fit=crop&w=800&q=60',
      description: "I'll bring your favorite character to life! New cosplay videos every week, vote for what I wear next! ✨",
      isPremium: true,
      subscriptionPrice: '$12.99 / month',
      videoCount: '112 videos available',
      subscriberCount: '15.7k subscribers',
      tag: 'Cosplay fantasy companion',
    },
  ]

  const faqs = [
    {
      question: 'How personal are these AI videos?',
      answer: 'Our AI generates unique videos daily based on your preferences and interactions.',
    },
    {
      question: 'Can I request specific content?',
      answer: 'Premium subscribers can make custom requests that our AI will create for you.',
    },
    {
      question: 'How often will I receive new videos?',
      answer: 'Daily new content from your subscribed AI companions, depending on your plan.',
    },
  ]

  return (
    <div className="min-h-screen bg-[#121212] text-white pb-20">
      {/* App Header */}
      <div className="px-4 pt-2 pb-3 flex items-center">
        <div className="text-xl font-bold">AI Companions</div>
        <div className="ml-auto flex space-x-4">
          <i className="fas fa-search text-xl"></i>
          <i className="fas fa-sliders-h text-xl"></i>
        </div>
      </div>

      {/* Subscription Banner */}
      <div className="mx-4 mb-4 bg-gradient-to-r from-pink-600 to-purple-600 rounded-xl p-4">
        <div className="flex justify-between items-center">
          <div>
            <h3 className="font-bold text-lg">Unlimited Access</h3>
            <p className="text-sm opacity-90">Subscribe to get daily personalized videos</p>
          </div>
          <button className="bg-white text-pink-600 px-4 py-2 rounded-full text-sm font-bold">
            Join Now
          </button>
        </div>
      </div>

      {/* AI Companions */}
      <div className="px-4 py-2">
        <h3 className="font-bold mb-3">Featured AI Companions</h3>
        {companions.map((companion) => (
          <div key={companion.id} className="mb-4">
            <Link to={`/ai-companion/${companion.id}`} className="block">
              <div className="bg-[#1E1E1E] rounded-xl overflow-hidden">
                <div className="relative h-48">
                  <img
                    src={companion.cover}
                    alt={companion.name}
                    className="w-full h-full object-cover"
                  />
                  {companion.isPremium && (
                    <div className="absolute top-2 right-2 bg-[#FF4D4D] text-white text-xs font-bold px-2 py-1 rounded-full">
                      <i className="fas fa-crown mr-1"></i> Premium
                    </div>
                  )}
                  <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4">
                    <h3 className="font-bold text-lg">{companion.name}</h3>
                    <p className="text-sm text-gray-300">{companion.tag}</p>
                  </div>
                </div>
                <div className="p-4">
                  <p className="text-sm text-gray-400 mb-4">{companion.description}</p>
                  <div className="flex justify-between items-center">
                    <Link
                      to={`/ai-companion/${companion.id}/chat`}
                      className="bg-[#FF4D4D] text-white px-6 py-2 rounded-lg flex items-center"
                      onClick={(e) => e.stopPropagation()}
                    >
                      <svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
                      </svg>
                      Start Chat
                    </Link>
                  </div>
                </div>
              </div>
            </Link>
          </div>
        ))}
      </div>

      {/* FAQ Section */}
      <div className="px-4 py-4 mb-20">
        <h3 className="font-bold mb-3">Frequently Asked Questions</h3>
        <div className="space-y-3">
          {faqs.map((faq, index) => (
            <div key={index} className="bg-gray-800 rounded-lg p-3">
              <h4 className="font-semibold">{faq.question}</h4>
              <p className="text-sm text-gray-400 mt-1">{faq.answer}</p>
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}

export default AICompanionList 